<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>庄磊简历v1-4</title>
    <meta name="viewport" content="width=device-width" />
    <!-- favicon图标 -->
    <link rel="shortcut icon" href="../../static/favicon.png" type="image/x-icon">
    <!-- 51la网站统计 -->
    <script src="../../static/js/tongji.js"></script>
    <!-- iconfont -->
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2969103_117wkqbc6tln.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <link rel="stylesheet" type="text/css" href="./css/side.css">

</head>

<body>

    <div class="resume" id="app">
        <!-- ------------------------ 头部 ------------------------ -->
        <header>
            <div class="head-content">
                <span>{{datas.other.text1}}</span>
            </div>
        </header>

        <!-- ------------------------ 主内容 ------------------------ -->
        <main>
            <!-- ---------------- 左侧 ---------------- -->
            <div class="main-left">
                <section class="base">
                    <div class="title">{{datas.other.text2}}</div>
                    <div class="photo">
                        <img :src="datas.xinxi.img" alt="photo">
                    </div>
                    <div class="name">{{datas.xinxi.user}}</div>
                    <div class="post">{{datas.xinxi.qzyx}}：{{datas.xinxi.gangwei}}</div>
                </section>

                <!-- -------- 个人资料 -------- -->
                <section class="box xinxi">
                    <div class="box-title">{{datas.xinxi.title}}</div>
                    <div class="box-content">
                        <ul>
                            <li v-for="(item, index) in datas.xinxi.data" :key="index" v-show="index>0">
                                <span>{{item.name}}：</span>{{item.text}}
                            </li>
                        </ul>
                    </div>
                </section>

                <!-- -------- 荣誉证书 -------- -->
                <section class="box zhengshu">
                    <div class="box-title">{{datas.zhengshu.title}}</div>
                    <div class="box-content">
                        <ul>
                            <li v-for="(item, index) in datas.zhengshu.data.ryzs" :key="index">
                                <span>{{item.name}}：</span>{{item.text}}
                            </li>
                        </ul>
                    </div>
                </section>

                <!-- -------- 专业技能 -------- -->
                <section class="box zhiye">
                    <div class="box-title">{{datas.zhiye.title}}</div>
                    <div class="box-content">
                        <ul>
                            <li v-for="(item, index) in datas.zhiye.data" :key="index">
                                <span>{{item.name}}</span>
                                <div><i :style="{width: item.text+'%'}"></i></div>
                            </li>
                        </ul>
                    </div>
                </section>
            </div>
            <!-- 左侧 -->
            <!-- ---------------- 右侧 ---------------- -->
            <div class="main-right">

                <!-- -------- 教育背景 -------- -->
                <section class="module" v-if="datas.jiaoyu">
                    <div class="module-title">
                        <div class="r-logo">
                            <i class="i iconfont icon-jiaoyu"></i>
                        </div>
                        <h3>{{datas.jiaoyu.title}}</h3>
                        <div class="hr"></div>
                    </div>
                    <div class="module-content">
                        <div class="list-wrap" v-for="(item, index) in datas.jiaoyu.data" :key="index">
                            <ul class="item-col-3" v-show="index<2">
                                <li>{{item.time}}</li>
                                <li>{{item.name}}</li>
                                <li>{{item.type}}</li>
                            </ul>
                        </div>
                    </div>
                </section>

                <!-- -------- 工作经历 -------- -->
                <section class="module" v-if="datas.gongzuo">
                    <div class="module-title">
                        <div class="r-logo">
                            <i class="i iconfont icon-work0"></i>
                        </div>
                        <h3>{{datas.gongzuo.title}}</h3>
                        <div class="hr"></div>
                    </div>
                    <div class="module-content">
                        <div class="list-wrap" v-for="(item, index) in datas.gongzuo.data" :key="index"
                            v-show="index<5">
                            <ul class="item-col-3">
                                <li>{{item.time}}</li>
                                <li>{{item.name}}</li>
                                <li>{{item.type}}</li>
                            </ul>
                            <div class="item-edit">
                                <ul v-for="(item, index) in item.data" :key="index">
                                    <li>{{item.text}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- -------- 项目经验 -------- -->
                <section class="module xiangmu" v-if="datas.xiangmu">
                    <div class="module-title">
                        <div class="r-logo">
                            <i class="i iconfont icon-testgroup_Line_icons"></i>
                        </div>
                        <h3>{{datas.xiangmu.title}}</h3>
                        <div class="hr"></div>
                    </div>
                    <div class="module-content">
                        <div class="list-wrap">
                            <div class="item-edit">
                                <div v-for="(item, index) in datas.xiangmu.data" :key="index">
                                    <strong>{{item.name}}</strong><span>{{item.text}}</span>
                                </div>
                                <!-- 项目职责 -->
                                <div>
                                    <strong>{{datas.xiangmu.zhize.name}}</strong>
                                    <ol>
                                        <li v-for="(item, index) in datas.xiangmu.zhize.data" :key="index"
                                            v-show="index<4">
                                            {{item.text}}
                                        </li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- -------- 培训经历 -------- -->
                <section class="module" v-if="datas.peixun0">
                    <div class="module-title">
                        <div class="r-logo">
                            <i class="i iconfont icon-jiaoyu"></i>
                        </div>
                        <h3>{{datas.peixun.title}}</h3>
                        <div class="hr"></div>
                    </div>
                    <div class="module-content">
                        <div class="list-wrap" v-for="(item, index) in datas.peixun.data" :key="index">
                            <ul class="item-col-3" v-show="index<4">
                                <li>{{item.time}}</li>
                                <li>{{item.name}}</li>
                                <li>{{item.type}}</li>
                            </ul>
                            <div class="item-edit" v-if="item.data">
                                <div>
                                    <strong>{{item.data.name}}</strong>
                                    <span>{{item.data.text}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- -------- 校园经历 -------- -->
                <section class="module" v-if="datas.xiaoyuan0">
                    <div class="module-title">
                        <div class="r-logo">
                            <i class="i iconfont icon-gongzuo"></i>
                        </div>
                        <h3>{{datas.xiaoyuan.title}}</h3>
                        <div class="hr"></div>
                    </div>
                    <div class="module-content">
                        <div class="list-wrap">
                            <div class="item-edit">
                                <p v-for="(item, index) in datas.xiaoyuan.data" :key="index">
                                    <strong>{{item.name}}</strong><span>{{item.text}}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- -------- 技能特长 -------- -->
                <section class="module jineng" v-if="datas.jineng">
                    <div class="module-title">
                        <div class="r-logo">
                            <i class="i iconfont icon-icon_attestation"></i>
                        </div>
                        <h3>{{datas.jineng.title}}</h3>
                        <div class="hr"></div>
                    </div>
                    <div class="module-content">
                        <div class="list-wrap">
                            <div class="item-edit">
                                <ul>
                                    <li v-for="(item, index) in datas.jineng.data" :key="index" v-show="index<6">
                                        {{item.text}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- -------- 自我评价 -------- -->
                <section class="module pingjia" v-if="datas.pingjia">
                    <div class="module-title">
                        <div class="r-logo">
                            <i class="i iconfont icon-icon_attestation"></i>
                        </div>
                        <h3>{{datas.pingjia.title}}</h3>
                        <div class="hr"></div>
                    </div>
                    <div class="module-content">
                        <div class="list-wrap">
                            <div class="item-edit">
                                <ul>
                                    <li v-for="(item, index) in datas.pingjia.data" :key="index">{{item.text}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

            </div>
            <!-- 右侧 -->
        </main>
        <!-- 主内容 -->
        <!-- ------------------------ 底部 ------------------------ -->
        <footer>&copy; <a :href="datas.other.copy">bealei</a></footer>
    </div>
    <!-- ------------------------ 侧边栏 ------------------------ -->
    <aside>
        <ul>
            <li class="peise">
                配色
                <ul id="peise">
                    <li class="blue" onclick="blue()"></li>
                    <li class="green"></li>
                    <li class="red"></li>
                    <li class="yellow"></li>
                </ul>
            </li>
            <li class="dayin">打印</li>
            <li class="down">下载
                <ul id="down">
                    <li class="image1">PNG1</li>
                    <li class="pdf1">PDF1</li>
                    <li class="image2">PNG2</li>
                    <li class="pdf2">PDF2</li>
                </ul>
            </li>
        </ul>
    </aside>
</body>

<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/vue-2.6.12.min.js"></script>
<!-- png、pdf -->
<script src="./js/jspdf.debug-1.3.4.js"></script>
<script src="./js/html2canvas-0.5.0-beta3.js"></script>
<script src="./js/dom-to-image-2.6.0.js"></script>
<!-- 侧边栏 -->
<script src="./js/side.js"></script>


<script>
    Vue.config.productionTip = true; //阻止 vue 在启动时生成生产提示。
    new Vue({
        el: '#app',
        data() {
            return {
                datas: [],
            };
        },
        mounted() {
            // 这里一定要使用常量 const来引用this，不然可能会出现this指向问题
            const that = this;
            // 使用getjson读取数据
            $.getJSON('./data.json', function (res) {
                // 将读取到的json数据赋值给rows
                that.datas = res.content;
                console.log('请求到的数据：', res);
            });
        },
    });
</script>

</html>